<template>
  <div class="product-publish">
    <div class="page-header">
      <h2>商品发布</h2>
    </div>

    <!-- 步骤条 -->
    <el-card class="steps-card">
      <el-steps :active="activeStep" align-center finish-status="success">
        <el-step title="选择商品类目" />
        <el-step title="填写商品信息" />
        <el-step title="填写商品属性/规格" />
        <el-step title="填写商品描述" />
        <el-step title="选择商品模板" />
      </el-steps>
    </el-card>

    <!-- 步骤内容 -->
    <el-card class="content-card">
      <!-- 第一步：选择商品类目 -->
      <div v-show="activeStep === 0" class="step-content">
        <CategorySelect
          v-model="productData.category"
        />
      </div>

      <!-- 第二步：填写商品信息 -->
      <div v-show="activeStep === 1" class="step-content">
        <ProductInfo
          v-model="productData.productInfo"
        />
      </div>

      <!-- 第三步：填写商品属性/规格 -->
      <div v-show="activeStep === 2" class="step-content">
        <ProductSpec
          v-model="productData.specs"
          :category-id="productData.category.level3"
        />
      </div>

      <!-- 第四步：填写商品描述 -->
      <div v-show="activeStep === 3" class="step-content">
        <ProductDescription
          v-model="productData.description"
        />
      </div>

      <!-- 第五步：选择商品模板 -->
      <div v-show="activeStep === 4" class="step-content">
        <ProductTemplate
          v-model="productData.template"
        />
      </div>

      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button v-if="activeStep > 0" @click="handlePrevStep">
          <template v-if="activeStep === 1">上一步，选择商品分类</template>
          <template v-else-if="activeStep === 2">上一步，填写商品信息</template>
          <template v-else-if="activeStep === 3">上一步，填写商品属性/规格</template>
          <template v-else-if="activeStep === 4">上一步，填写商品描述</template>
        </el-button>
        <el-button 
          v-if="activeStep < 4" 
          type="primary" 
          @click="handleNextStep"
        >
          <template v-if="activeStep === 0">下一步，填写商品信息</template>
          <template v-else-if="activeStep === 1">下一步，填写商品属性/规格</template>
          <template v-else-if="activeStep === 2">下一步，填写商品描述</template>
          <template v-else-if="activeStep === 3">下一步，选择商品模板</template>
        </el-button>
        <template v-if="activeStep === 4">
          <el-button @click="handleSave">保存</el-button>
          <el-button type="primary" @click="handlePublish">发布</el-button>
          <el-button type="success" @click="handlePreview">预览</el-button>
        </template>
      </div>
    </el-card>

    <!-- 预览对话框 -->
    <el-dialog
      v-model="previewVisible"
      title="商品预览"
      width="80%"
      top="5vh"
    >
      <ProductPreview :product-data="productData" />
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import CategorySelect from '../components/product/CategorySelect.vue'
import ProductInfo from '../components/product/ProductInfo.vue'
import ProductSpec from '../components/product/ProductSpec.vue'
import ProductDescription from '../components/product/ProductDescription.vue'
import ProductTemplate from '../components/product/ProductTemplate.vue'
import ProductPreview from '../components/product/ProductPreview.vue'

export default {
  name: 'ProductPublish',
  components: {
    CategorySelect,
    ProductInfo,
    ProductSpec,
    ProductDescription,
    ProductTemplate,
    ProductPreview
  },
  setup() {
    const activeStep = ref(0)
    const previewVisible = ref(false)

    // 商品数据
    const productData = reactive({
      category: {
        level1: null,
        level2: null,
        level3: null,
        level1Name: '',
        level2Name: '',
        level3Name: ''
      },
      productInfo: {
        type: '实物商品',
        name: '',
        sellingPoint: '',
        brand: null,
        keywords: '',
        price: '',
        marketPrice: '',
        deliveryMethod: '商家配送',
        images: [],
        video: null,
        remark: ''
      },
      specs: {
        attributes: [],
        selectedSaleAttrs: [],
        skuList: []
      },
      description: '',
      template: null
    })

    // 验证第一步：选择商品类目
    const validateStep0 = () => {
      if (!productData.category.level3) {
        ElMessage.warning('请选择商品类目')
        return false
      }
      return true
    }

    // 验证第二步：填写商品信息
    const validateStep1 = () => {
      const info = productData.productInfo
      
      if (!info.name) {
        ElMessage.warning('商品名称必填项未填写，请填写完成进入下一步')
        return false
      }
      if (!info.brand) {
        ElMessage.warning('商品品牌必填项未填写，请填写完成进入下一步')
        return false
      }
      if (!info.price) {
        ElMessage.warning('商品售价必填项未填写，请填写完成进入下一步')
        return false
      }
      if (!info.images || info.images.length === 0) {
        ElMessage.warning('商品图片必填项未填写，请填写完成进入下一步')
        return false
      }
      
      return true
    }

    // 验证第三步：填写商品属性/规格
    const validateStep2 = () => {
      const specs = productData.specs
      
      if (!specs.skuList || specs.skuList.length === 0) {
        ElMessage.warning('请填写商品属性/规格信息')
        return false
      }
      
      // 验证SKU列表的必填项
      for (let i = 0; i < specs.skuList.length; i++) {
        const sku = specs.skuList[i]
        if (!sku.salePrice) {
          ElMessage.warning('销售价格必填项未填写，请填写完成进入下一步')
          return false
        }
        if (sku.stock === null || sku.stock === undefined || sku.stock === '') {
          ElMessage.warning('商品库存必填项未填写，请填写完成进入下一步')
          return false
        }
        if (!sku.stockUnit) {
          ElMessage.warning('单位必填项未填写，请填写完成进入下一步')
          return false
        }
        if (!sku.warehouseLocation) {
          ElMessage.warning('仓库所在地必填项未填写，请填写完成进入下一步')
          return false
        }
      }
      
      return true
    }

    // 下一步
    const handleNextStep = () => {
      // 根据当前步骤验证
      let isValid = true
      
      if (activeStep.value === 0) {
        isValid = validateStep0()
      } else if (activeStep.value === 1) {
        isValid = validateStep1()
      } else if (activeStep.value === 2) {
        isValid = validateStep2()
      }
      
      if (isValid && activeStep.value < 4) {
        activeStep.value++
      }
    }

    // 上一步
    const handlePrevStep = () => {
      if (activeStep.value > 0) {
        activeStep.value--
      }
    }

    // 保存
    const handleSave = () => {
      ElMessage.info('功能开发中')
      console.log('保存商品数据:', productData)
    }

    // 发布
    const handlePublish = () => {
      ElMessage.info('功能开发中')
      console.log('发布商品数据:', productData)
    }

    // 预览
    const handlePreview = () => {
      previewVisible.value = true
    }

    return {
      activeStep,
      previewVisible,
      productData,
      handleNextStep,
      handlePrevStep,
      handleSave,
      handlePublish,
      handlePreview
    }
  }
}
</script>

<style scoped>
.product-publish {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.steps-card {
  margin-bottom: 20px;
}

.content-card {
  min-height: 500px;
}

.step-content {
  padding: 20px 0;
}

.action-buttons {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
  text-align: center;
}

.action-buttons .el-button {
  margin: 0 10px;
  min-width: 200px;
}
</style>
